<template>
  <div v-show="formData[key].isshow" class="container">
    <el-form-item :id="key">
      <div class="btn-wrap" @click="clickHandler">
        <el-button type="primary">{{ component.attrName }}</el-button>
      </div>
    </el-form-item>
    <el-dialog
      :title="inerConfig.title"
      :visible.sync="show"
      :withHeader="false"
      class="m-dialog"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-container>
        <el-main v-loading="loading">
          <el-row>
            <el-col v-if="inerConfig.dataType == 'LIST'">
              <slot-grid
                ref="xtable"
                v-on="$listeners"
                :config="inerConfig"
                @clickcell="clickCellHandler"
                @findlist="load"
              ></slot-grid>
            </el-col>
            <el-col v-if="inerConfig.dataType == 'TREE'">
              <slot-tree
                ref="xtree"
                v-on="$listeners"
                :config="inerConfig"
                @clickcell="clickCellHandler"
                @findlist="load"
              ></slot-tree>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
import http from "@/utils/http";
import SlotTree from "./slotTree.vue";
import SlotGrid from "./slotGrid.vue";
export default {
  name: "GatheringBtn",
  components: {
    SlotGrid,
    SlotTree,
  },
  props: {
    component: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formData: {
      type: Object,
    },
    ruleData: {
      type: Object,
    },
    actionValue: {
      type: String,
      default: "",
    },
    span: {
      type: Number || String,
      default: 16,
    },
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    key() {
      return this.component.pageTempStructId + "-" + this.component.attrId;
    },
    sqlCode() {
      return this.actionValue.split("|")[1]
        ? this.actionValue.split("|")[1] + '|' + (this.actionValue.split("|")[2] || "")
        : "findCust";
    },
  },
  data() {
    return {
      show: false,
      loading: false,
      inerConfig: {
        //默认值使用空结构,为了代码中不报错
        title: "",
        dataType: "LIST", //LIST:列表，TREE 树
        tableForm: {
          items: [],
          data: {
            name: "",
          },
        },
        tableColumn: [],
        returnColumn: [],
        tableData: [],
        pageInfo: {
          pageIndex: "1",
          pageSize: "10",
          pageCount: "0",
          rowCount: "0",
        },
      },
      cTableData: [], //保存树形结构第一次请求的数据，用于再次打开回显
    };
  },
  methods: {
    async load(filerData) {
      this.loading = true;
      let querys = [];
      if (filerData) {
        //处理过滤查询
        const keys = Object.keys(filerData);
        keys.forEach((key, index) => {
          if (index == 0) return; //接口在生成配置时不得不带回一个冗余字段name,在这里去掉
          querys.push(`${key}:${filerData[key]}`);
        });
      }
      let res = await http({
        url: `${process.env.VUE_APP_CTX_PPM_QUERY}/ppm-query-server/qryConfigListDefPage`,
        data: { sqlCode: this.sqlCode, param: querys.join(";") },
        method: "POST",
      });
      if (res.code == 200) {
        this.inerConfig = res.meta;
        if (this.inerConfig.dataType == "TREE") {
          if (this.inerConfig.tableData.length == 24) {
            let t22 = this.inerConfig.tableData[22];
            this.inerConfig.tableData = [t22];
            this.cTableData = this.inerConfig.tableData;
          } else if (this.inerConfig.tableData.length == 23) {
            let t21 = this.inerConfig.tableData[21];
            this.inerConfig.tableData = [t21];
            this.cTableData = this.inerConfig.tableData;
          }
        }
      } else {
        throw new Error("接口异常");
      }
      this.loading = false;
    },

    async clickHandler() {
      this.show = true;
      this.$nextTick(() => {
        if (this.cTableData.length > 0) {
          this.$refs.xtree.tableForm = this.inerConfig.tableForm;
          this.$refs.xtree.tableData = this.cTableData;
        } else {
          this.load(); //表格类型打开时暂时添加一次请求
          this.$refs.xtable.tableForm = this.inerConfig.tableForm;
        }
      });
    },

    clickCellHandler(row) {
      this.show = false;
      this.$emit("getPluginValue", { data: row, key: this.key });
    },
  },
};
</script>

<style lang="scss" scoped>
.clickBtn {
  ::v-deep .el-input-group--append .el-input__inner,
  .el-input-group__prepend {
    cursor: pointer;
  }
}
.btn-wrap {
  text-align: left;
}
.container ::v-deep .el-form-item__content {
  margin-left:20px !important;
}
.container ::v-deep .el-form-item {
  padding: 0;
}
</style>
